<template>
  <div class="row">
    <!-- 菜单 -->
    <div class="col-sm-12 col-md-8">
      <table class="table">
        <thead class="thead-default">
          <tr>
            <th>尺寸</th>
            <th>价格</th>
            <th>加入</th>
          </tr>
        </thead>
        <tbody v-for="item in getMenuItems" >
          <tr>
            <td><strong>{{item.name}}</strong></td>
          </tr>
          <tr v-for="option in item.options" :key="option.size">
            <td>{{option.size}}</td>
            <td>{{option.price}}</td>
            <td><button    @click="addToBasket(item,option)" class="btn btn-sm btn-outline-success">+</button></td>
          </tr>
        </tbody>
      </table>
    </div>
     <!--  购物车-->
     <div class="col-sm-12 col-md-4">
        <!--购物车有数据  -->
       <div   v-if="basket.length>0">
                 <table class="table">
                         <thead class="thead-default">
                           <tr>
                             <th>数量</th>
                             <th>品种</th>
                             <th>价格</th>
                           </tr>
                         </thead>
                         <tbody v-for="item  in  basket">
                           <tr>
                             <td>
                               <button class="btn btn-sm"  @click="decreaseQuantity(item)">-</button>
                               <span>{{item.quantity}}</span>
                               <button class="btn btn-sm"   @click="increaseQuantity(item)">+</button>
                             </td>
                             <td>{{item.name}}    {{item.size}}寸</td>
                             <td>{{item.price*item.quantity}}</td>
                           </tr>
                         </tbody>
                       </table>
                      <p>总价: {{total+"RMB"}}</p>
                     <button class="btn btn-success btn-block">提交</button>
        </div>
        <!-- 购物车没有数据的时候显示 -->
        <div  v-else>
             {{basketText}}
        </div>
     </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        basket:[],
        basketText:"购物车没有任何商品",
        // getMenuItems:{}
      }
    },
    created(){
      this.fetchData()
    },
    computed:{
       total() {
         let   allTotal=0;
         for( let  index  in  this.basket) {
                let    data= this.basket[index];
                // console.log(data);
                allTotal+=data.price*data.quantity;
                // console.log(allTotal)
         }
         return allTotal;
       },
       getMenuItems(){
         // 在vuex中获取数据
         // return this.$store.state.menuItems
         // 通过getters获取数据
         return this.$store.getters.getMenuItems;
       },
    },
    methods:{
        fetchData() {
        //1.请求数据的第一种方式
                // fetch("https://wd9599772701wqqwkt.wilddogio.com/menu.json")
                //   .then(res => {
                //     return res.json()
                //   })
                //   .then(data => {
                //     this.getMenuItems = data
                //   })
        //2.请求数据的第2 种方式
               // this.http.get('menu.json').then(res=>{
               //     this.getMenuItems = res.data
               // })

          //将获取得到的数据储存到vuex中
          this.http.get("menu.json")
                   .then(res => this.$store.commit("setMenuItems",res.data))
        },
        addToBasket(item,option) {
          //将我们的数据储存在一个对象中
           let basket={
              name:item.name,
              price:option.price,
              size:option.size,
              quantity:1
           }
           if(this.basket.length>0) {
                //进行过滤，将储存起来的数据与点击的item 里面的数据进行对比,如果数据相同，就返回这个数组
                let  result  = this.basket.filter((basket)=> {
                    return (basket.name===item.name&&basket.price===option.price);
                });
                 // console.log(result);
                if(result != null && result.length > 0){
                  result[0].quantity++;
                }else{
                  this.basket.push(basket)
                }

           } else  {
              this.basket.push(basket);
           }
        },
        decreaseQuantity(item) {
            item.quantity--;
            if(item.quantity <= 0){
              this.removeFromBasket(item)
            }
        },
        increaseQuantity(item) {
           item.quantity++;
        },
        removeFromBasket(item){
          //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
          // splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
          this.basket.splice(this.basket.indexOf(item),1);
        }
    }
  }
</script>
